<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
    }

    #box {
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="box">12345</div>
  <!-- <div id="box">12345</div> -->
  <div id="box">54321</div>
  <div>666</div>

  <ul>
    <li>1</li>

  </ul>
  <script>


    // const div = document.getElementById('box')
    // console.log(div)

    // const div = document.getElementsByClassName('box')
    // console.log(div)  
    const div = document.getElementsByTagName('div')
    console.log(div)
    // const div = document.querySelector('div')
    // const div = document.querySelector('.box')
    // const div = document.querySelector('#box')
    // console.log(div)
    // const li = document.querySelector('ul li')
    // console.log(li)
    // 打印对象
    // console.dir(div)  // dom 对象
    // div.style.color = 'red'
    // console.log(typeof div)


    // const lis = document.querySelectorAll('ul li')
    // console.log(lis)



    // lis.style.color = 'red'
    // lis[2].style.color = 'red'

    // for (let i = 0; i < lis.length; i++) {
    //   lis[i].style.color = 'red'
    // }


  </script>

</body>

</html>